﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ContentMenu</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    
</head>
<body>
    <h1>ContentMenu 右键菜单</h1>
   
    <p style="font-size:13px;"><b>Note：</b>请右键点击。</p>   
    
    <div id="region1" style="width:250px;height:150px;border:solid 2px #bbb;font-size:13px;color:#999;text-align:center;line-height:150px;font-weight:bold;cursor:default;">

        右键点击我
    </div>
   
<ul id="contextMenu" class="mini-contextmenu" >
    <li>
		<span >操作</span>
		<ul>
		    <li iconCls="icon-new" onclick="onItemClick">新建</li>
            <li class="separator"></li>
            <li iconCls="icon-add" onclick="onItemClick">增加</li>	
			<li iconCls="icon-edit" onclick="onItemClick">修改</li>
	        <li iconCls="icon-remove" onclick="onItemClick">删除</li>	 	             
		</ul>
	</li>
    <li class="separator"></li>
	<li iconCls="icon-open" >打开</li>
	<li iconCls="icon-remove" >关闭</li>
</ul>

    
    <script type="text/javascript">
        mini.parse();
        
        function onItemClick(e) {
            var item = e.sender;
            alert(item.getText());     
        }

        window.onload = function () {
            $("#region1").bind("contextmenu", function (e) {
                var menu = mini.get("contextMenu");
                menu.showAtPos(e.pageX, e.pageY);
                return false;
            });
        }

    </script>

    <div class="description">
        <h3>Description</h3>
        <p>监听DOM元素的contextmenu事件，调用Menu的showAtPos方法，实现右键菜单。            
        </p>
    </div>
</body>
</html>